<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单验证</title>
</head>
<body>
	<form action="useradd.php" method="post">
		<table>
			<tr>
				<td>用户名</td>
				<td><input type="text" name="username" readmin="请输入6~18位用户名"><span></span></td>
			</tr>
			<tr>
				<td>密码</td>
				<td><input type="password" name="password" readmin="请输入6~18位密码"><span></span></td>
			</tr>
			<tr>
				<td>确认密码</td>
				<td><input type="password" name="repassword" readmin="请再次确认密码"><span></span></td>
			</tr>
			<tr>
				<td>邮箱</td>
				<td><input type="text" name="email" readmin="请输入合法的邮箱"><span></span></td>
			</tr>
			<tr>
				<td>&nbsp;&nbsp;</td>
				<td><button>注册</button></td>
			</tr>
		</table>
	</form>
	<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
	//全局变量 标识
	var CUSER = false;
	var CPASS = false;
	var CREPASS = false;
	var CEMAIL = false;


	//绑定表单提交事件
	$('form').submit(function(){
		//触发所有的丧失焦点事件
		$('input').trigger('blur');

		//判断所有的字段都检测成功后提交
		if(CUSER && CPASS && CREPASS && CEMAIL){
			//都成功
			return true;
		}

		//阻止默认行为
		return false;
	})

	//给所有的字段绑定获取焦点事件
	$('input').focus(function(){
		//获取readmin的值
		var res = $(this).attr('readmin');
		//给span设置文本
		$(this).next().html(res).css('color','green');
	})

	//给用户名绑定丧失焦点事件
	$('input[name=username]').blur(function(){
		//获取用户名
		var uname = $(this).val();
		//声明正则验证用户名是否合法
		var reg = /^\w{6,18}$/;
		var res = reg.test(uname);
		if(!res){
			//如果用户名不符合正则要求
			$(this).next().html('用户名格式不正确').css('color','red');
			//修改input边框颜色
			$(this).css('border','1px solid red');
			//修改全局变量
			CUSER = false;
			return false;
		}
		var inp = $(this);
		//发送ajax
		$.ajax({
			url:'1.php',
			data:{name:uname},
			type:'post',
			// dataType:'json',
			success:function(data){
				//判断返回值
				if(data == 1){
					inp.next().html('ok').css('color','green');
					inp.css('border','1px solid green');
					//修改全局变量
					CUSER = true;
				}else{
					inp.next().html('用户名已存在,请更换').css('color','red');
					inp.css('border','1px solid red');
					//修改全局变量
					CUSER = false;
				}
			},
			error:function(){
				alert('ajax错误');
			},
			// timeout:2000,
			//同步
			async:false
		})
	})


	//给密码绑定丧失焦点事件
	$('input[name=password]').blur(function(){
		//获取用户输入的密码
		var pass = $(this).val();
		//声明正则
		var reg = /^\w{6,18}$/;
		if(reg.test(pass)){
			//正确
			$(this).next().html('ok').css('color','green');
			$(this).css('border','1px solid green');
			CPASS = true;
		}else{
			//错误
			$(this).next().html('密码格式不正确').css('color','red');
			$(this).css('border','1px solid red');
			CPASS = false;
		}
	})


	//给确认密码绑定丧失焦点事件
	$('input[name=repassword]').blur(function(){
		//获取用户输入的确认密码
		var repass = $(this).val();
		//获取密码
		var pass = $('input[name=password]').val();

		if(repass == ''){
			//错误
			$(this).next().html('密码不能为空').css('color','red');
			$(this).css('border','1px solid red');
			CREPASS = false;
			return false;
		}

		if(repass == pass){
			//正确
			$(this).next().html('ok').css('color','green');
			$(this).css('border','1px solid green');
			CREPASS = true;
		}else{
			//错误
			$(this).next().html('两次密码不一致').css('color','red');
			$(this).css('border','1px solid red');
			CREPASS = false;
		}
	})

	//给邮箱绑定丧失焦点事件
	$('input[name=email]').blur(function(){
		//获取用户输入的邮箱
		var email = $(this).val();
		//声明正则
		var reg = /^\w+@\w+\.(com|cn|com\.cn|org|net)$/;
		if(reg.test(email)){
			//正确
			$(this).next().html('ok').css('color','green');
			$(this).css('border','1px solid green');
			CEMAIL = true;
		}else{
			//错误
			$(this).next().html('邮箱格式不正确').css('color','red');
			$(this).css('border','1px solid red');
			CEMAIL = false;
		}
	})

	</script>
	
</body>
</html>